// 获取查询字符串
function getQueryString(key){
    var str = location.search.substr(1)
    var arr1 = str.split('&')
    var result = ''
    arr1.forEach(function (item){
        var arr2 = item.split('=')// ['id','Mavic']
        if (arr2[0] === key) {
            result = arr2[1]
        }
    })
    return result // 返回结果
}

// 获取元素
function $(selecor){
    var likeArray = document.querySelectorAll(selecor)
    if (likeArray.length === 1) {
        return likeArray[0]
    } else {
        return likeArray
    }
}

// 获取dom元素到body左侧和顶部的距离
function offset(dom){
    var oLeft = 0 - dom.clientLeft
    var oTop = 0 - dom.clientTop
    while(dom){
        oLeft += dom.offsetLeft + dom.clientLeft
        oTop += dom.offsetTop + dom.clientTop
        dom = dom.offsetParent
    }
    return {left: oLeft, top: oTop}
}

// 获取当前商品的id值
var Did = getQueryString('id')
// console.log( Did )// '3'  '12'  ...

var data = '' // 保存当前页面要渲染的数据
for (var i = 0; i < detail.length; i++){
    // 遍历数组中的每一个对象，如果对象的id属性值等于Did时
    // 此时该对象就是当前页面要渲染的数据
    if (detail[i].id === Did) {
        data = detail[i] // 当前页面要渲染的数据
        break // 结束循环
    }
}

console.log( data )

// 渲染当前位置数据
$('.navs').innerHTML = `
    <a href="./index.html">商城首页</a> / 
    <a href="./list.html?id=${data.class}">${data.titleparent[0]}</a> / 
    <span>${data.titleparent[1]}</span>
`

// 渲染商品详细信息
$('.goods_msg .top h1').innerText = data.title
$('.goods_msg .top h3').innerText = '￥' + data.price
var tmp1 = ''// 空模板
data.description.forEach(function (item){
    tmp1 += `<li>● ${item}</li>`
})
$('.goods_msg .center').innerHTML = tmp1

var tmp2 = ''// 空模板
data.imggood.forEach(function (item){
    tmp2 += `<img src="${item}" alt="">`
})
$('.small_img').innerHTML = tmp2

// 默认显示第一张图片
$('.big_img img').src = data.imggood[0]
$('.right img').src = data.imggood[0]
$('.small_img img')[0].className = 'active'

// 渲染产品概览数据
var tmp3 = ''// 空模板
data.imgds.forEach(function (item){
    tmp3 += `<img src="${item}" alt="">`
})
$('.detail_imgs').innerHTML = tmp3


// 图片切换
var small_imgs = $('.small_img img')// 所有的小图片
var bid_img = $('.big_img img')// 大图片
var index = 0 // 记录当前显示图片的索引
for (var i = 0; i < small_imgs.length; i++){
    // 给每一个小图片添加一个属性保存对应的索引
    small_imgs[i].index = i
    // 给每一个小图片添加点击事件
    small_imgs[i].onclick = function (){
        // this -> 点击的那个图片
        // this.index 点击的那个图片的索引

        // 去掉当前选中图片的选中状态
        small_imgs[index].className = ''

        // 给当前点击的图片添加选中状态
        this.className = 'active'

        // 更新当前选中图片的索引
        index = this.index

        // 大图片修改图片地址
        bid_img.src = this.src
        $('.right img').src = this.src
    }
}

// 放大镜效果
var big_img = $('.big_img')
var mask = $('.mask')
var right = $('.goods .right')
var rtImg = $('.goods .right img')

// 添加鼠标进入事件
big_img.onmouseenter = function (){
    mask.style.display = 'block'
    right.style.display = 'block'
}
// 添加鼠标离开事件
big_img.onmouseleave = function (){
    mask.style.display = 'none'
    right.style.display = 'none'
}

// 添加鼠标移动事件
big_img.onmousemove = function (e){
    // console.log( e.pageX,e.pageY )// 触发事件时，鼠标在页面中的坐标
    // console.log( e.clientX,e.clientY )// 触发事件时，鼠标在可视区中的坐标
    // console.log( e.offsetX,e.offsetY )// 触发事件时，鼠标在e.target中的坐标

    var m_left = e.pageX - offset(big_img).left - mask.clientWidth/2
    var m_top = e.pageY - offset(big_img).top - mask.clientHeight/2

    // 临界值判断
    if (m_left < 0) {// left最小值
        m_left = 0
    }
    if (m_left >= big_img.clientWidth - mask.clientWidth) {// left最大值
        m_left = big_img.clientWidth - mask.clientWidth
    }

    if (m_top < 0) {// top最小值
        m_top = 0
    }
    if (m_top >= big_img.clientHeight - mask.clientHeight) {// top最大值
        m_top = big_img.clientHeight - mask.clientHeight
    }

    // 将计算过后的left和top值 赋值给mask
    mask.style.left = m_left + 'px'
    mask.style.top = m_top + 'px'

    // mask和rtImg移动方向相反
    // 假如mask向右移动50px，rtImg应该向左移动多少？
    // 计算mask运动距离占总路程的比例
    var scalex = m_left / (big_img.clientWidth - mask.clientWidth)
    var scaley = m_top / (big_img.clientHeight - mask.clientHeight)

    // 根据运动比例计算rtImg的left和top值
    var r_left = scalex * (rtImg.clientWidth - right.clientWidth)
    var r_top = scaley * (rtImg.clientHeight - right.clientHeight)

    // 将计算过后的left和top值 赋值给rtImg
    rtImg.style.left = -r_left + 'px'
    rtImg.style.top = -r_top + 'px'
}